<template>
  <j-modal
    :fullscreen="false"
    :title="title"
    :width="width"
    :visible="visible"
    :maskClosable="false"
    switchFullscreen
    @ok="handleOk"
    :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }"
    @cancel="handleCancel"
  >
    <j-form-container>
      <a-form-model ref="form" :model="model" slot="detail">
        <a-row>
          <a-col :span="12">
            <a-col :span="24">
              <a-form-model-item label="订单号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="">
                <a-input v-model="model.dingdbh" placeholder=""></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="保单号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="">
                <a-input v-model="model.baodh" placeholder=""></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="被保险人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="">
                <a-input v-model="model.beibxr" placeholder=""></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="被保险人电话" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="">
                <a-input v-model="model.beibxrlxdh" placeholder=""></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="被保险人邮箱" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="">
                <a-input v-model="model.beibxryx" placeholder=""></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="被保险车牌号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="">
                <a-input v-model="model.bebxcph" placeholder=""></a-input>
              </a-form-model-item>
            </a-col>
          </a-col>

          <a-col :span="12">
            <a-col :span="24">
              <a-form-model-item label="车型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="">
                <a-input v-model="model.chelmc" placeholder=""></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="初登日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="">
                <a-input v-model="model.chudrq" placeholder=""></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="行驶里程" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="">
                <a-input v-model="model.xingslc" placeholder=""></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="起保日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="">
                <a-input v-model="model.qibrq" placeholder=""></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="终保日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="">
                <a-input v-model="model.zhongbrq" placeholder=""></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="赔付限额" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="">
                <a-input v-model="model.peifxe" placeholder=""></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="审核图片" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="">
                <a-upload list-type="picture-card" :file-list="fileList" @preview="handlePreview" disabled></a-upload>
                <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel2">
                  <img alt="example" style="width: 100%" :src="previewImage" />
                </a-modal>
              </a-form-model-item>
            </a-col>
          </a-col>

          <a-divider />

          <a-col :span="24">
            <a-form-item label="审核意见" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-textarea rows="3" v-model="auditMemo" />
            </a-form-item>
            <a-form-item label="审核结果" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-radio-group v-model="auditStatus">
                <a-radio :value="2"> 通过 </a-radio>
                <a-radio :value="-1"> 驳回 </a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </j-modal>
</template>

<script>
import { getAction } from '@/api/manage'

export default {
  name: 'KuybOrderModal',
  components: {},
  data() {
    return {
      previewVisible: false,
      previewImage: '',
      fileList: [],
      auditMemo: '已核验，符合要求。审核通过',
      auditStatus: 2,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      model: {},
      title: '',
      width: 1024,
      visible: false,
      disableSubmit: false,
    }
  },
  methods: {
    handleCancel2() {
      this.previewVisible = false;
    },

    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj)
      }
      this.previewImage = file.url || file.preview
      this.previewVisible = true
    },

    add() {
      this.visible = true
      this.$nextTick(() => {
        // this.$refs.realForm.add();
      })
    },

    edit(record) {
      let that = this

      this.visible = true
      this.$nextTick(() => {
        // this.$refs.realForm.edit(record);

        getAction('/order/kuybOrder/queryKuybOrderPolicyByMainId', { id: record.id }).then((res) => {
          if (res.success) {
            let records = res.result
            if (records && records.length > 0) {
              this.model = Object.assign({}, records[0])
              this.fileList = [
                {
                  uid: '1',
                  url: this.model.xignsz
                },
                {
                  uid: '2',
                  url: this.model.yibp
                }
              ]
            }
          }
        })
      })
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      let that = this

      getAction('/order/kuybOrder/audit', {
        dingdbh: this.model.dingdbh,
        auditStatus: this.auditStatus,
        auditMemo: this.auditMemo,
      }).then((res) => {
        if (res.success) {
          that.$message.success('审核完成')
          that.$emit('ok')
          that.visible = false
        } else that.$message.error(res.message)
      })
    },
    submitCallback() {
      this.$emit('ok')
      this.visible = false
    },
    handleCancel() {
      this.close()
    },
  },
}
</script>

<style scoped>
</style>